<template>
    <div class="familyman">
        <div class="search">
            <el-form :inline="true" :model="query" class="demo-form-inline">
                <el-form-item>
                    <el-input v-model="query.key" placeholder="参数名" clearable style="width: 240px;" />
                </el-form-item>
                <el-form-item>
                    <el-button color="#b9e8e3" plain class="btn" @click="getSearch">查询</el-button>
                    <el-button color="#17b3a3" class="btn2" @click="getAdd">新增</el-button>
                    <el-button color="#f56c6c" class="btn2" @click="getDelete(null)"
                        :disabled="delId.length == 0">批量删除</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="table">
            <el-table ref="multipleTableRef" :data="tableData" highlight-current-row style="width: 100%"
                @selection-change="handleSelectionChange" border>
                <el-table-column type="selection" width="55" />
                <el-table-column property="id" label="ID" width="80" />
                <el-table-column property="planId" label="计划ID" width="80" />
                <el-table-column property="name" label="计划标题" width="150" />
                <el-table-column property="sourceId" label="样本来源" width="150" />
                <el-table-column property="planDate" label="计划时间" width="150" />
                <el-table-column property="realDate" label="实际时间" width="150" />
                <el-table-column property="department" label="随访部门" width="100" />
                <el-table-column property="doctor" label="随访医生" width="80" />
                <el-table-column property="item" label="随访方式" width="80" />
                <el-table-column property="content" label="随访记录" width="200" />
                <el-table-column property="createOn" label="创建时间" width="150" />
                <el-table-column property="createBy" label="创建人" width="80" />
                <el-table-column property="modifiedOn" label="修改时间" width="150" />
                <el-table-column label="操作" width="150" fixed="right">
                    <template #default="scope">
                        <el-button text @click="getUpdate(scope.row.id)">修改</el-button>
                        <el-button text @click="getDelete(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog v-model="dialogVisible" :title="title" width="800">
            <el-form ref="ruleFormRef" style="padding:30px 10px 10px" :model="ruleForm" :rules="rules"
                label-width="auto">
                <el-form-item label="计划ID" prop="planId">
                    <el-select v-model="ruleForm.planId" placeholder="计划ID">
                        <el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="样本来源" prop="sourceId">
                    <el-input v-model="ruleForm.sourceId" placeholder="样本来源" />
                </el-form-item>
                <el-form-item label="计划时间" prop="planDate">
                    <el-date-picker v-model="ruleForm.planDate" type="date" style="width: 100%;" />
                </el-form-item>
                <el-form-item label="实际时间" prop="realDate">
                    <el-date-picker v-model="ruleForm.realDate" type="date" style="width: 100%;" />
                </el-form-item>
                <el-form-item label="随访部门" prop="department">
                    <el-input v-model="ruleForm.department" placeholder="随访部门" />
                </el-form-item>
                <el-form-item label="随访医生" prop="doctor">
                    <el-input v-model="ruleForm.doctor" placeholder="随访医生" />
                </el-form-item>
                <el-form-item label="随访方式">
                    <el-radio-group>
                        <el-radio label="1" size="large">电话随访</el-radio>
                        <el-radio label="2" size="large">上门随访</el-radio>
                        <el-radio label="3" size="large">问卷随访</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="随访记录" prop="content">
                    <el-input v-model="ruleForm.content" placeholder="随访记录" />
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="ruleForm.remark" type="textarea" placeholder="备注" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="resetForm(ruleFormRef)">取消</el-button>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <page :query="query" :total="total" @size-change="sChange" @page-change="pChange"></page>
    </div>
</template>

<script lang="ts" setup>

import { nextTick, onMounted, reactive, ref } from 'vue';
import { ComponentSize, ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
import page from '@/components/page.vue'
import { fluprecordAllList, fluprecordList, fluprecordSave, fluprecordShow, fluprecordUpdate } from '@/api/fluprecord';
import { fluprecordDelete } from '../../api/fluprecord';


// 变量：==================================================
const query = reactive({
    t: Date.now(),
    page: 1,
    limit: 10,
    key: ''
})

const tableData = ref([])
const currentRow = ref()
const total = ref(0)
const dialogVisible = ref(false)
// 表单
const title = ref('')
interface RuleForm {
    planId: number | null
    sourceId: string
    planDate: string
    realDate: string
    item: number | null
    remark: string
    department: string
    doctor: string
    content: string
    createOn: any
    createBy: string
    modifiedOn: any
    t: number
}
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
    planId: null,
    sourceId: '',
    planDate: '',
    realDate: '',
    item: null,
    remark: '',
    department: '',
    doctor: '',
    content: '',
    createOn: Date.now(),
    createBy: '',
    modifiedOn: Date.now(),
    t: Date.now()
})
const options = ref([])

const rules = reactive<FormRules<RuleForm>>({
    planId: [
        { required: true, message: '计划ID不能为空', trigger: 'blur' },
    ],
    sourceId: [
        { required: true, message: '样本来源不能为空', trigger: 'blur' },
    ],
    planDate: [
        { required: true, message: '计划时间不能为空', trigger: 'blur' },
    ],
    realDate: [
        { required: true, message: '实际时间不能为空', trigger: 'blur' },
    ],
    department: [
        { required: true, message: '随访部门不能为空', trigger: 'blur' },
    ],
    doctor: [
        { required: true, message: '随访医生不能为空', trigger: 'blur' },
    ],
    content: [
        { required: true, message: '随访记录不能为空', trigger: 'blur' },
    ]
})
const name = ref('')
const sourceIdCard = ref('')
const familyId = ref()
const size = ref<ComponentSize>('default')
const disabled = ref(false)
const multipleSelection = ref<User[]>([])
const delId = ref([])


// 函数：=========================================
// 多选
const handleSelectionChange = (val: any) => {
    multipleSelection.value = val
    delId.value = []
    for (const item of val) {
        delId.value.push(item.id)
    }
}
// 生命周期
onMounted(() => {
    getFluprecord()
})
// 渲染表格数据
function getFluprecord() {
    fluprecordList(query).then(res => {
        // console.log(res, '888');
        tableData.value = res.page.list
        total.value = res.page.totalCount
    })
}
// 查询
function getSearch() {
    query.page = 1
    getFluprecord()
}
// 分页
// 切换条数
const sChange = (val: number) => {
    console.log(`切换为每页：${val}条`);
    query.limit = val
    getFluprecord()
}
// 切换页数
const pChange = (val: number) => {
    console.log(`第${val}页`);
    query.page = val
    getFluprecord()
}
// 新增
function getAdd() {
    dialogVisible.value = true
    title.value = '新增'
    // 重置表单
    nextTick(() => {
        ruleFormRef.value.resetFields()
    })
    fluprecordAllList().then(res => {
        console.log(res);
        options.value = res.AllList
    })
}
//编辑
function getUpdate(val: number) {
    dialogVisible.value = true
    title.value = '修改'
    fluprecordAllList().then(res => {
        console.log(res);
        options.value = res.AllList
    })
    fluprecordShow(val).then(res => {
        console.log(res, '99');
        ruleForm.planId = res.flupRecord.planId
        ruleForm.sourceId = res.flupRecord.sourceId
        ruleForm.planDate = res.flupRecord.planDate
        ruleForm.realDate = res.flupRecord.realDate
        ruleForm.department = res.flupRecord.department
        ruleForm.doctor = res.flupRecord.doctor
        ruleForm.item = res.flupRecord.item
        ruleForm.content = res.flupRecord.content
        ruleForm.remark = res.flupRecord.remark
    })
}
// 表单-确定
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            ruleForm.createOn = formDate(ruleForm.createOn)
            ruleForm.modifiedOn = formDate(ruleForm.modifiedOn)
            ruleForm.planDate = formDate(ruleForm.planDate)
            ruleForm.realDate = formDate(ruleForm.realDate)
            if (title.value == '新增') {
                fluprecordSave(ruleForm).then(res => {
                    // console.log(res, '88');
                    ElMessage.success('添加成功')
                    dialogVisible.value = false
                    getFluprecord()
                })
                    .catch(err => {
                        ElMessage.error('添加失败')
                    })
            } else if (title.value == '修改') {
                fluprecordUpdate(ruleForm).then(res => {
                    // console.log(res, '5');
                    ElMessage.success('修改成功')
                    dialogVisible.value = false
                    getFluprecord()
                })
                    .catch(err => {
                        ElMessage.error('修改失败')
                    })
            }
        } else {
            console.log('error submit!', fields)
        }
    })
}
// 取消
const resetForm = (formEl: FormInstance | undefined) => {
    dialogVisible.value = false

    if (!formEl) return
    formEl.resetFields()
}

// 删除
function getDelete(index: any) {
    let id = index ? [index] : delId.value
    console.log(id, 'id');
    
    ElMessageBox.confirm(
        `确定对[id=${id}]进行[删除]操作？`,
        'Warning',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        fluprecordDelete(id).then(res => {
            ElMessage.success('删除成功')
            getFluprecord()
        })
    })

}

// 处理时间戳
function formDate(value: any) {
    let data = new Date(value)
    // 年
    let yy = data.getFullYear()
    // 月
    let mm = data.getMonth() + 1
    // 日
    let dd = data.getDate()
    // 时
    let hh = data.getHours()
    // 分
    let m = data.getMinutes()
    // 秒
    let s = data.getSeconds()

    return `${yy}-${mm}-${dd}  ${hh}:${m}:${s}`
}
</script>

<style lang="scss" scoped>
.familyman {
    .search {
        .btn {
            color: #5d5c5c;
        }

        .btn2 {
            color: #fff;
        }

    }

    :deep .table {
        .el-table thead th {
            background-color: #fff !important;
            color: #909399;
        }

        .cell {
            text-align: center !important;
            font-size: 12px !important;
        }

        .el-butto {
            width: 50px !important;
            padding: 0 !important;
        }

        .el-button.is-text {
            padding: 9px 0 !important;
        }

        .el-button>span {
            color: #17b3a3 !important;
            font-size: 12px;
        }
    }

    :deep .dialog {
        .el-table thead th {
            background-color: #fff !important;
            color: #909399;
        }

        .cell {
            text-align: center !important;
            font-size: 12px !important;
        }
    }
}
</style>